<template>
  <div class="info-collapse w100">
    <div class="head" @click="toggle">
      <div class="head-name">{{name}}</div>
    </div>
    <el-collapse-transition>
      <div class="content" v-show="visible">
        <slot></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
  export default {
    name: 'InfoCollapse',
    props: {
      name: {
        type: String,
        default: ''
      },
      isShow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        visible: this.isShow
      }
    },
    methods: {
      /**
       * 显示隐藏交替
       * */
      toggle () {
        this.visible = !this.visible
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../../static/scss/common";
  .info-collapse {
    margin-bottom: 10px;
    .head {
      background-color: #EDEDED;
      height: 48px;
      cursor: pointer;
      display: flex;
      align-items: center;
      .head-name {
        color: $gray6;
        font-size: 16px;
        margin-left: 16px;
      }
    }
    .content {
      padding: 31px 24px;
      border: 1px solid #EDEDED;
    }
  }
</style>
